<template>
    <div class="skuDetails">

        <h2 class="productInfo-title">{{productInfo.seriesTitle}}</h2>
        <p class="des">{{productInfo.seriesSubTitle}}</p>
        <div class="coin">{{productInfo.coin}} <img src="@/assets/img/monad.png"> </div>

        <!-- 选规格 -->
        <section v-for="(item,index) in parameterJson" :key="index">
            <h3 class="title">{{item.title}}</h3>
            <ul class="parameters">
                <li 
                    v-for="val in item.parameters" 
                    :key="val.id"
                    :class="val.currentActivate?'parameterActive':''"
                    @click="toDetail(val.id)"
                >{{val.title}}
                </li> 
            </ul>
        </section>
        
        
        <!-- 选数量 -->
        <h3 class="title">数量 <span>*礼品库存{{productInfo.stock}}件</span></h3>
        <ul class="numControler">
           <li class="addBtn" @click="addNum">+</li>
           <li class="num">{{num}}</li>
           <li class="reduBtn" @click="subNum">-</li>
        </ul>

        <!-- 两个按钮 -->
        <div class="btns">
            <div class="addCart" @click="addToCart">加入购物车</div>
            <div class="buy">立即购买</div>
        </div>

        <!-- 点赞与分享 -->
        <div class="icons">
            <div class="like">
                <img src="@/assets/img/love.png" alt="">
                <span>喜欢 <span>{{productInfo.like}}</span></span>
            </div>
        </div>
    </div>
</template>

<script>
import { addToCartAPI } from '@/request/detailApi.js'

import { mapState, mapActions } from 'vuex'
export default {
    props: ['productInfo'],
    data() {
        return {
            parameterJson:[],
            currentParameterIndex: -1,
            num: 1
        };
    },
    computed:{
        ...mapState({
            isLogined: state => state.loginStatus.isLogined
        })
    },
    created(){
        setTimeout(()=>{
            this.parameterJson = this.productInfo.parameterJson
        },200)
    },
    methods:{
        ...mapActions({
            asyncChangeIsShowToast: 'toastStatus/asyncChangeIsShowToast'
        }),
        toDetail(id){
            this.$router.push({ path:'/detail', query:{ id }})
        },
        // 步进器操作
        addNum(){
            this.num++
        },
        subNum(){
            if(this.num>1){
                this.num--
            }
        },
        // 加入购物车
        addToCart(){
            if(!this.isLogined){
                this.asyncChangeIsShowToast({
                    msg: '请先登录账号',
                    type: 'info'
                })
                return
            }

            // 发起请求
            addToCartAPI({
                productId: this.$route.query.id,
                total: this.num,
                modified: 1
            }).then(res=>{
                if(res.code == 0){
                    this.asyncChangeIsShowToast({
                        msg: res.msg,
                        type: 'success'
                    })
                    this.$router.go(0)  //刷新页面，为了更新购物车数量
                }
            })
        }
    }
};
</script>

<style scoped lang="less">
    .skuDetails{
        flex: 1;
        box-sizing: border-box;
        padding: 7px 50px 0 32px;

        .productInfo-title{
            font-size: 28px;
            font-family: SourceHanSansSC;
            font-weight: 400;
            color: #000000;
            line-height: 23px;
            cursor: pointer;
        }

        .des{
            margin-top: 15px;
            font-size: 14px;
            font-family: SourceHanSansSC;
            font-weight: 300;
            color: #999999;
            line-height: 20px;
            cursor: pointer;
        }

        .coin{
            margin-bottom: 19px;
            height: 76px;
            font-size: 28px;
            font-family: SourceHanSansSC;
            font-weight: bold;
            color: #FD604D;
            line-height: 76px;
            border-bottom: 1px solid  #ECECEC;

            display: flex;
            align-items: center;

            img{
                margin-top: 2px;
                margin-left: 5px;
                width: 20px;
                height: 20px;
            }
        }

        .title{
            font-size: 16px;
            font-family: SourceHanSansSC;
            font-weight: 300;
            color: #000000;
            span{
                color: #999;
                padding-left: 5px;
                box-sizing: border-box;
            }
        }

        .parameters{
            margin-bottom: 30px;
            display: flex;
            flex-wrap: wrap;

            li{
                margin-top: 14px;
                margin-right: 20px;
                padding: 0 17px;
                height: 32px;
                font-size: 14px;
                font-family: SourceHanSansSC;
                font-weight: 300;
                line-height: 32px;
                color: #666666;
                border: 1px solid #D1D1D1;
                cursor: pointer;
            }

            .parameterActive{
                border: 1px solid #0A328E;
                color: #0A328E;
            }
        }

        .numControler{
            margin-top: 15px;
            display: flex;

            .addBtn,.reduBtn{
                width: 30px;
                height: 32px;
                border: 1px solid #D1D1D1;
                font-size: 20px;
                font-family: SourceHanSansSC;
                font-weight: 400;
                line-height: 32px;
                text-align: center;
                color: #999999;
                cursor: pointer;
            }

            .num{
                height: 32px;
                padding: 0 20px;
                line-height: 32px;
                text-align: center;
                color: #999999;
                border-top: 1px solid #D1D1D1;
                border-bottom: 1px solid #D1D1D1;
            }
        }

        .btns{
            margin-top: 24px;
            display: flex;
            .addCart,.buy{
                width: 150px;
                height: 46px;
                font-size: 18px;
                font-family: SourceHanSansSC;
                font-weight: 300;
                text-align: center;
                line-height: 46px;
                color: #FFFFFF;
                cursor: pointer;
            }
            .addCart{
                margin-right: 20px;
                background: #3DC36B;
            }

            .buy{
                background: #FD604D;
            }
        }

        .icons{
            margin-top: 25px;
            display: flex;
            .like{
                padding-right: 15px;
                height: 26px;
                display: flex;
                align-items: center;
                border-right: 1px solid #ECECEC;

                img{
                   margin-right: 12px; 
                   cursor: pointer;
                }

                span{
                    font-size: 16px;
                    font-weight: normal;
                    font-stretch: normal;
                    color: #666;
                }
            }
        }
    }
</style>
